
<template>
  <div class="auth">
    <dnav :data="['系统设置', '查看权限']" />
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="权限列表" name="list">
        <el-table :data="authlist" border height="70vh" style="width: 100%">
          <el-table-column prop="id" label="id" width="80"> </el-table-column>
          <el-table-column prop="name" label="名称" width="180">
          </el-table-column>
          <el-table-column prop="path" label="权限" width="180">
          </el-table-column>
          <el-table-column label="级别">
            <template slot-scope="prop">
              <el-tag :type="prop.row.level == 1 ? 'success' : ''">
                {{ prop.row.level == 1 ? "一级权限" : "二级权限" }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="权限分类" name="tree">
        <el-table
          :data="authtype"
          height="70vh"
          row-key="id"
          border
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="id" label="id" sortable width="180">
          </el-table-column>
          <el-table-column prop="name" label="名称" sortable width="180">
          </el-table-column>
          <el-table-column prop="path" label="权限"> </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "list",
      authlist: [], // 权限列表
      authtype: [], // 权限分类
    };
  },
  methods: {
    async getauth(type) {
      // 获取权限
      let res = await this.$api.Allauth({ type });
      if (res.data.code == 200) {
        if (type == "list") {
          this.authlist = res.data.data;
        } else {
          this.authtype = res.data.data;
        }
      }
    },
    handleClick(tab, event) {
      console.log(this.activeName);
    },
  },
  mounted() {
    this.getauth("list");
    this.getauth("tree");
  },
};
</script>

<style>
</style>